import React, { Component } from "react"
import { Card, message } from "antd"
import { Steps } from 'antd';
import { column } from '@apps/frontDesk/config'
import DetailTable from '@pages/common/dialogTable'
import { getFood } from '@net/good/info'
import "../../index.scss"
const { Step } = Steps;

interface IPorps {
    code: number
}
interface IStates {
    current: number,
    data: any[]
    loading: boolean,
    fCode: number,
    ftime: string,
    stime: string,
    ptime: string,
    instime: string,
    motime: string,
    recalltime: string
}

export default class GoodDetail extends Component<IPorps, IStates> {
    constructor(props: IPorps) {
        super(props)
        this.state = {
            current: 0,
            data: [],
            loading: true,
            fCode: 0,
            ftime: "",
            stime: "",
            ptime: "",
            instime: "",
            motime: "",
            recalltime: ""
        }
    }
    public componentDidMount() {
        this.setState({ fCode: this.props.code }, () => {
            this.getData(this.state.fCode)
        })
    }
    public componentDidUpdate(preProps: any) {
        if (this.props.code !== preProps.code) {
            this.setState({ fCode: this.props.code,current:0 }, () => {
                this.getData(this.state.fCode)
            })
        }
    }
    public getData = async (code: number) => {
        const res = await getFood(code)
        const { status, msg, data } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else {
            // message.success({ content: msg, style: { marginTop: "20%" } })
            data.forEach((item: any, index: number) => {
                item.Id = index
            })
            this.setState({ data: data, loading: false })
        }

    }
    public selectRow = (item: any) => {
        // console.log(item)
        this.setState({
            ftime: item.createtime,
            stime: item.screatetime,
            ptime: item.date,
            instime: item.insCreatetime,
            motime: item.traRecTime,
            recalltime: item.reTime
        },() => {
            if (item.verify === "2" && item.environment === '0') {
                this.setState({ current: 1 })
            } else if (item.environment === '1' && (item.insVerify ==="0" || item.insVerify === '2')) {
                this.setState({ current: 2 })
            } else if (item.insVerify === '1' && !item.traRecTime) {
                this.setState({ current: 3 })
            }
            else if (item.traRecTime !== null && !item.reTime) {
                this.setState({ current: 4 })
            } else if (item.reTime !== null) {
                this.setState({ current: 5 })
            }
        })
    }
    public render() {
        const { current, ftime,
            stime,
            ptime,
            instime,
            motime,
            recalltime } = this.state
        return (
            <div className="source">
                <Card className="card">
                    <Steps current={current}>
                        <Step title="食品信息" description={ftime} />
                        <Step title="原料审核" description={stime} />
                        <Step title="生产环境审核" description={ptime} />
                        <Step title="食品质量审核" description={instime} />
                        <Step title="食品运输" description={motime} />
                        <Step title="食品召回" description={recalltime} />
                    </Steps>
                    <DetailTable
                        scroll={{ x: 6000 }}
                        columns={column()}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        selectRow={this.selectRow}
                    >
                    </DetailTable>
                </Card>
            </div>
        )
    }
}